<template>
  <div>
    <!-- vant 输入框 -->
    <van-search
      v-model.trim="value"
      placeholder="请输入搜索关键词"
      shape="round"
      @input="inputFn"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="resultList.length === 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotArr"
          :key="index"
          @click="fn(obj.first)"
          >{{ obj.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <p class="hot_title">最佳匹配</p>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <SongItem
          v-for="item in resultList"
          :key="item.id"
          :title="item.name"
          :id="item.id"
          :label="item.ar[0].name"
        ></SongItem>
      </van-list>
    </div>
  </div>
</template>
<script>
import { hotSearchAPI, searchResultListAPI } from "@/api";
import SongItem from "@/components/SongItem.vue";
export default {
  components: {
    SongItem,
  },

  data() {
    return {
      value: "",
      hotArr: [], //热搜关键词列表
      resultList: [], //搜索结果
      loading: false, //表示是否正在加载更多数据，默认为false，表示为加载
      finished: false, //表示是否所有的数据都加载结束了，默认为false
      page: 1, //页数，默认为1，默认展示第一页数据
    };
  },

  async created() {
    const res = await hotSearchAPI();
    this.hotArr = res.data.result.hots;
  },

  methods: {
    async getListFn() {
      return await searchResultListAPI({
        keywords: this.value,
        limit: 50,
        offset: (this.page - 1) * 50,
      });
    },

    async fn(val) {
      this.value = val;
      this.page = 1;
      this.finished = false;
      const res = await this.getListFn();
      this.resultList = res.data.result.songs;
      console.log(this.resultList);
    },

    async inputFn() {
      if (this.value.length === 0) {
        this.finished = false;
        this.page = 1;
        this.resultList = [];
        return;
      }
      const res = await this.getListFn();
      if (res.data.result.songs === undefined) {
        this.resultList = [];
        return;
      }
      this.resultList = res.data.result.songs;
    },
    async onLoad() {
      this.page++;
      const res = await this.getListFn();

      if (res.data.result.songs === undefined) {
        this.finished = true;
        this.loading = false;
        return;
      }
      this.resultList = [...this.resultList, ...res.data.result.songs];

      this.loading = false;
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>
